<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<html>
  <head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1"/>
    <meta charset="utf-8"/>
    <style>
      @font-face {
        font-family: 'Zilla Slab';
        font-weight: 400;
        font-style: normal;
        src: url("/fonts/ZillaSlab-Regular.woff2") format("woff2"), url("/fonts/ZillaSlab-Regular.woff") format("woff");
      }
      @font-face {
        font-family: 'Zilla Slab';
        font-weight: 700;
        font-style: normal;
        src: url("/fonts/ZillaSlab-Bold.woff2") format("woff2"), url("/fonts/ZillaSlab-Bold.woff") format("woff");
      }
      @font-face {
        font-family: 'Zilla Slab';
        font-weight: 400;
        font-style: italic;
        src: url("/fonts/ZillaSlab-RegularItalic.woff2") format("woff2"), url("/fonts/ZillaSlab-RegularItalic.woff") format("woff");
      }
      @font-face {
        font-family: 'Zilla Slab';
        font-weight: 700;
        font-style: italic;
        src: url("/fonts/ZillaSlab-BoldItalic.woff2") format("woff2"), url("/fonts/ZillaSlab-BoldItalic.woff") format("woff");
      }
      @font-face {
        font-family: 'Open Sans';
        font-weight: 400;
        font-style: normal;
        src: url("/fonts/opensans-regular.woff2") format("woff2"), url("/fonts/opensans-regular.woff") format("woff");
      }
      @font-face {
        font-family: 'Open Sans';
        font-weight: 700;
        font-style: normal;
        src: url("/fonts/opensans-bold.woff2") format("woff2"), url("/fonts/opensans-bold.woff") format("woff");
      }

      h3 {
        font-size: 3rem;
        font-family: 'Zilla Slab', sans-serif;
      }

      html, body {
        font-size: 10px;
        font-family: 'Open Sans', sans-serif;
        background-color: #305067;
        color: #fff;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      #maindiv {
        display: block;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
      }

      .item {
        display: block;
        margin: 1rem auto;
        width: 100%;
        max-width: 30rem;
        text-decoration: none;
        border: none;
        border-radius: 0.5rem;
        font-size: 1.6rem;
      }

      .item.create {
        width: auto;
        background: #597285;
        padding: 1rem 4rem;
        color: #fff;
        text-align: center;
        margin-bottom: 4rem;
      }

      .item.create:hover {
        background-color: #658196;
      }

      .item.ssid,
      .item.password {
        color: #000;
        height: 2.3rem;
        text-align: left;
        background-color: #d2d9de;
        padding: 0.5rem;
      }

      #wordmark {
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        height: 3.6rem;
      }

      @media only screen and (max-width: 830px) {
        #wordmark {
          display: none;
        }
      }
    </style>
    <script>
      function checkpass() {
        const pass1 = document.getElementById('password');
        const pass2 = document.getElementById('password-confirm');

        if (pass1.value !== pass2.value) {
          pass1.setCustomValidity('Passwords must match');
          pass2.setCustomValidity('Passwords must match');
        } else {
          pass1.setCustomValidity('');
          pass2.setCustomValidity('');
        }
      }
    </script>
    <title>Router Setup - WebThings Gateway</title>
  </head>
  <body>
    <form action="/creating" method="post" id="mainform">
      <div id="maindiv">
        <h3>Create a new Wi-Fi network</h3>
        <br>
        <input id="ssid" name="ssid" type="text" value="{{ssid}}"
          placeholder="Network name" required minlength="1" maxlength="32"
          class="item ssid">
        <input id="password" name="password" type="password" value=""
          placeholder="Password" minlength="8" class="item password"
          required oninput="window.checkpass()">
        <input id="password-confirm" name="password-confirm" type="password"
          value="" placeholder="Confirm password" class="item password"
          required oninput="window.checkpass()">
        <br>
        <br>
        <input type="submit" name="create" value="Create" class="item create">
      </div>
      <img id="wordmark" alt="WebThings Gateway by Mozilla" src="/optimized-images/wordmark.svg" />
    </form>
  </body>
</html>
